<template>
	<view class="wrap">
		<view class="search">
			<u-search searchIconSize='30' placeholder="请输入" v-model="keyword"  @custom="query" :clearabled="true" ></u-search>
		</view>
		<view class="bottom">
			<button class="upload_button" @tap="add">
				<u-icon name="plus" color="#fff"></u-icon>
				新增
			</button>
		</view>
		<view class="list">
			<view class="xh">
				<u-row>
					<u-col span="2">
						<view calss="title">序号</view>
					</u-col>
					<u-col span="4">
						<view calss="title">商家名称</view>
					</u-col>
					<u-col span="4">
						<view calss="title">活动</view>
					</u-col>
					<u-col span="2">
						<view calss="title">操作</view>
					</u-col>
				</u-row>
			</view>
			<view class="item" v-for="(i,index) in list" :key="index">
				<u-row>
					<u-col span="2">
						<text>{{index + 1}}</text>
					</u-col>
					<u-col span="4" @click="getById(i.id)">
						<text>{{i.sjmc}}</text>
					</u-col>
					<u-col span="4" @click="getHdById(i.id)">
						<text>查看活动</text>
					</u-col>
					<u-col span="2" @click="delByid(i.id)">
						<text>删除</text>
					</u-col>
				</u-row>
			</view>
		</view>
		
		<Addlist ref="addRef" bg="" @getList="getList" />
	</view>

</template>

<script>
	import Addlist from './Addlist.vue';
	export default {
		components: {
			Addlist,

		},
		data() {
			return {
				keyword: '',
				list:[],

			}
		},
		onShow(){
			this.getList();
		},
		methods: {
			delByid(id){
				this.$http.post('/app/sj/delSj', {
					id:id
				}).then(res => {
					this.getList();
					uni.$u.toast('删除成功')
				})
			},
			getById(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/gly/gly_form?id='+id
				})
			},
			getHdById(id){
				console.log(id)
				uni.navigateTo({
					url:'/pages/sjhd/sjhd?id='+id
				})
			},
			query(){
				this.$http.post('/app/sj/list', {
					page:1,
					limit:9999,
					sjmc:this.keyword
				}).then(res => {
					this.list = res.page.records
				})
			},
			add() {
				this.$refs.addRef.open();
				console.log('新增')
			},
			getList() {
				this.$http.post('/app/sj/list', {
					page:1,
					limit:9999
				}).then(res => {
					this.list = res.page.records
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background: url($imgUrl + "/lt_bg.jpg") no-repeat;
		background-size: 100% 100%;
		width: 750rpx;
		height: 100vh;

		.search {
			margin: 20rpx auto;
			width: 95%;
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}

	/deep/ .u-search__content {
		height: 70rpx !important;
	}

	/deep/ .u-search__action--active {
		width: 90rpx !important;
		height: 80rpx !important;
		line-height: 80rpx !important;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-weight: 500;
		font-size: 26rpx;
		padding: 0;
		border-radius: 10px;
		background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
		border: none;
	}

	.list {
		background: #fff;
		width: 95%;
		margin: 30rpx auto;
		border: 1rpx solid #276329;
		color: #333;

		.xh {
			height: 70rpx;



		}

		.item {
			height: 70rpx;

		}

		/deep/ .u-col {
			display: flex;
			justify-content: center !important;
			align-items: center !important;
			height: 70rpx;
			border-left: 1rpx solid #13b1a2 !important;
			border-bottom: 1rpx solid #13b1a2 !important;
		}
	}

	.bottom {
		// width: 80%;
		margin: 30rpx auto;

		.upload_button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 650rpx;
			height: 88rpx;
			color: #333;
			font-family: PingFangSC;
			color: #ffffff;
			font-weight: 500;
			font-size: 32rpx;
			padding: 0;
			border-radius: 50px;
			background: linear-gradient(90deg, #13b1a2 0%, #276329 100%);
			border: none;
		}
	}
</style>